<template>
  <div>
    <!-- 头部卡片行 -->
    <el-row :gutter="13">
      <el-col :span="6" class="card1">
        <div>
          <div class="div1">
            <span class="yueticon span1" style="color:white;font-size:70px;">&#xe697;</span>
          </div>
          <div style="float:left;padding-left:10px;">收入
            <br>
            <div>
              {{sum}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="card1">
        <div>
          <div class="div2">
            <span class="yueticon span1" style="color:white;font-size:70px;">&#xe693;</span>
          </div>
          <div style="float:left;padding-left:10px;">支出
            <br>
            <div>
              {{-sum1}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="card1">
        <div>
          <div class="div3">
            <span class="yueticon span1" style="color:white;font-size:70px;">&#xe61a;</span>
          </div>
          <div style="float:left;padding-left:10px;">盈利
            <br>
            <div>
              {{sum-sum1}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="card1">
        <div>
          <div class="div4">
            <span class="yueticon span1" style="color:white;font-size:70px;">&#xe635;</span>
          </div>
          <div style="float:left;padding-left:10px;">待定
            <br>
            <div>
              {{sum2}}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <br>
    <!-- 盈利报告行 -->
    <el-row style="border-bottom:1px solid #557c88">
      <el-form>
        <el-form-item label="本年度盈利报表">
          <ve-line v-if="chartData" :data="chartData"></ve-line>
        </el-form-item>
      </el-form>
    </el-row>
    <br>
    <!-- 详细收入支出报告  -->
    <el-row>
      <el-form>
        <el-form-item>
          <template slot="label">
            <div style="padding:0 0 10px 10px;">
              <h3>详细收入支出报告</h3>
            </div>
          </template>
          <br>
          <el-table :data="tableData1" row-key="id" border lazy
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="Day" align="center" label="日期">
            </el-table-column>
            <el-table-column prop="January" label="1月">
            </el-table-column>
            <el-table-column prop="February" label="2月">
            </el-table-column>
            <el-table-column prop="March" label="3月">
            </el-table-column>
            <el-table-column prop="April" label="4月">
            </el-table-column>
            <el-table-column prop="May" label="5月">
            </el-table-column>
            <el-table-column prop="June" label="6月">
            </el-table-column>
            <el-table-column prop="July" label="7月">
            </el-table-column>
            <el-table-column prop="August" label="8月">
            </el-table-column>
            <el-table-column prop="September" label="9月">
            </el-table-column>
            <el-table-column prop="October" label="10月">
            </el-table-column>
            <el-table-column prop="November" label="11月">
            </el-table-column>
            <el-table-column prop="December" label="12月">
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.div1 {
  background: #00c0ef;
  width: 100px !important;
  float: left;
  text-align: center;
  line-height: 85px;
  height: 90px;
}
.div2 {
  background: #dd4b39;
  width: 100px;
  float: left;
  text-align: center;
  line-height: 85px;
  height: 90px;
}
.div4 {
  background: #f39c12;
  width: 100px;
  float: left;
  text-align: center;
  line-height: 85px;
  height: 90px;
}
.div3 {
  background: #00a65a;
  width: 100px;
  float: left;
  text-align: center;
  line-height: 85px;
  height: 90px;
}
.myconfig {
  background: red;
  width: 80px;
  float: left;
  text-align: center;
  line-height: 85px;
  height: 90px;
}
.span1 {
  width: auto !important;
}
</style>
<style lang="scss" scoped>
.card1 {
  background-color: white;
}
</style>
<script>
export default {
  data: function () {
    return {
      //收入总金额
      Income: {},
      //支出
      Pay: {},
      indeterminate: {},
      sum: 0,
      sum1: 0,
      sum2: 0,
      chartData: {
        columns: ['时间', '盈利'],
        rows: []
      },
      tableData1: []
    }
  },
  methods: {
    //收入
    SIncome () {
      this.$axios({
        url: '/HrApi/Finance/FinanceIncome',
        method: 'GET',
      }).then(res => {
        this.Income = res.data.data
        let sum = 0;
        this.Income.forEach((item) => {
          sum += item.Amount;
        });
        this.sum = sum;
      })
    },
    //支出
    SPay () {
      this.$axios({
        url: '/HrApi/Finance/FinancePay',
        method: 'GET',
      }).then(res => {
        this.Pay = res.data.data
        let sum1 = 0;
        this.Pay.forEach((item) => {
          sum1 += item.Amount;
        });
        this.sum1 = sum1;
      })
    },
    //待定
    Sindeterminate () {
      this.$axios({
        url: '/HrApi/Finance/Financeindeterminate',
        method: 'GET',
      }).then(res => {
        this.indeterminate = res.data.data
        let sum2 = 0;
        this.indeterminate.forEach((item) => {
          sum2 += item.Amount;
        });
        this.sum2 = sum2;
      })
    },
    //详细报表
    GetReportList () {
      this.$axios({
        url: '/HrApi/Finance/ReportList',
        method: 'GET',
      }).then(res => {
        if (!res.data.code) {
          this.tableData1 = res.data.data
        }
      })
    },
    Gettest () {
      this.$axios({
        url: '/HrApi/Finance/GetChartList',
        method: 'GET',
      }).then(res => {
        if (!res.data.code) {
          this.chartData.rows = res.data.data

        }
      })
    }
  },
  mounted () {
    this.SIncome();
    this.SPay();
    this.Sindeterminate();
    this.Gettest();
    this.GetReportList();
  }
}
</script>